import './index.less'

// 定义数据接口
interface FireControlItem {
  name: string
  percentage: string // 例如 "50%"
  value: string
}

interface HavcDataItem {
  name: string
  percentage: string
  value: string
  color: string // 背景颜色
}

interface LeftBuidingProps {
  // 可以在这里定义组件接收的props，当前组件无外部props所以留空
}

const LeftBuiding: React.FC<LeftBuidingProps> = () => {
  // 模拟数据（建议从props或state中获取）
  const fireControl: FireControlItem[] = [
    { name: '消防通道状态', percentage: '80%', value: '正常' },
    { name: '消防设备运行', percentage: '95%', value: '正常' }
  ]

  const havcData: HavcDataItem[] = [
    { name: '温度控制', percentage: '75%', value: '22℃', color: '#409EFF' },
    { name: '湿度控制', percentage: '60%', value: '55%', color: '#67C23A' }
  ]

  return (
    <div className="left_buiding">
      {/* 消防系统模块 */}
      <div className="chart_li dynamic_dyke">
        <div className="chart_li_img" />
        <div className="chart_title">消防系统</div>
        <div className="chart_content">
          {fireControl.map((item, index) => (
            <div key={index} className="building_li">
              <div className="building_text">{item.name}</div>
              <div className="building_chart">
                <div className="chart_display" style={{ width: item.percentage }} />
                <span>{item.value}</span>
              </div>
              <div className="building_value">{item.percentage}</div>
            </div>
          ))}
        </div>
      </div>

      {/* 能源管理模块 */}
      <div className="chart_li dynamic_energy">
        <div className="chart_li_img" />
        <div className="chart_title">能源管理</div>
        <div className="chart_content">
          <div className="energy_li">
            <div className="energy_text">
              今日总耗能: <span>236.00/kmh</span>
            </div>
            <div className="energy_container">
              <div className="energy_chart">
                <div
                  className="energy_display"
                  style={{
                    backgroundImage: 'linear-gradient(to left, rgba(0,123,255,1), rgba(22,223,148,1))',
                    width: '100%'
                  }}
                />
                <span>236.00/kmh</span>
              </div>
            </div>
          </div>
          <div className="energy_li">
            <div className="energy_text">
              当前用电功率: <span>6.2kw</span>
            </div>
            <div className="energy_container">
              <div className="energy_chart">
                <div
                  className="energy_display"
                  style={{
                    backgroundImage: 'linear-gradient(to left, rgba(0,123,255,1), rgba(22,223,148,1))',
                    width: '100%'
                  }}
                />
                <span>6.2kw</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 暖通空调模块 */}
      <div className="chart_li dynamic_havc">
        <div className="chart_li_img" />
        <div className="chart_title">暖通空调</div>
        <div className="chart_content">
          {havcData.map((item, index) => (
            <div key={index} className="building_li">
              <div className="building_text">{item.name}</div>
              <div className="building_chart">
                <div
                  className="chart_display"
                  style={{
                    width: item.percentage,
                    backgroundColor: item.color
                  }}
                />
                <span>{item.value}</span>
              </div>
              <div className="building_value">{item.percentage}</div>
            </div>
          ))}
        </div>
      </div>

      {/* 交配电模块 */}
      <div className="chart_li dynamic_electric">
        <div className="chart_li_img" />
        <div className="chart_title">交配电</div>
        <div className="chart_content">
          <div className="distributing">
            {[1, 2, 3, 4, 5, 6, 7, 8].map((num) => (
              <div key={num} className="distributing_li">
                <div id={`ball_chart${num}`} style={{ width: '100%', height: '100%' }} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default LeftBuiding
